<template>
<div class="nav-top clearfix top" id="top">
 <!--  <ul class="top-nav">
    <li class="commpany">
      <span>行业</span>
      <a class="select-down1"><img src="../assets/ico_arrow_down.png"></a>
      <ul class="hide-li nav-li clearfix">
        <li v-for="(people, index) in tradeList" v-text="people.tradeName" :key="index" 
        @click="chooseSex(index, people.id)"></li>
      </ul>
    </li>
    <li v-if="$store.getters.token" @click="$router.push('/my/personInfo')">
      <img v-lazy="$store.getters.avatar" class="header-img">
      <li @click="$router.push('/my/personInfo')" v-text="$store.getters.mobile" class="name"></li>
    </li>
    <li v-if="!$store.getters.token">
      <li class="name" @click="doLogin" v-if="!$store.getters.token">亲，请登录</li>
    </li>
    <li class="back-out" @click='doBack()' v-if="$store.getters.token">退出</li>
    <li class="back-out" @click='doRegist()' v-if="!$store.getters.token">注册</li>
    <li class="father-li">
      <span @click="$router.push('/my/message')">消息</span>
      <div class="icon" @click="$router.push('/my/message')"><img src="../assets/ico_index_news.png"></div>
      <ul class="hide-li hide-ul" v-if="messageList && messageList.length > 0">
        <li class="clearfix" v-for="(messageInfo, index) in messageList" :key="index">
          <message :message="messageInfo" :theme="2"></message>
        </li>
      </ul>
    </li>
  </ul> -->
  <div class="app-container">
    <div class="fl top-left">
      <div id="weather" style="margin-right: 0">
        <iframe style="position: relative;top: -7px;" allowtransparency="true" frameborder="0" width="180" height="36" scrolling="no" src="//tianqi.2345.com/plugin/widget/index.htm?s=3&z=2&t=0&v=0&d=1&bd=0&k=000000&f=&ltf=009944&htf=cc0000&q=0&e=1&a=1&c=54511&w=180&h=36&align=left"></iframe>
        <!-- <iframe style="position: relative;top: -6px;" allowtransparency="true" frameborder="0" width="300" height="30" scrolling="no" src="//tianqi.2345.com/plugin/widget/index.htm?s=3&z=2&t=0&v=0&d=1&bd=0&k=000000&f=&ltf=009944&htf=cc0000&q=0&e=1&a=1&c=54511&w=180&h=36&align=center"></iframe> -->
        <!-- <iframe allowtransparency="true" frameborder="0" width="120" height="30" scrolling="no" src="//tianqi.2345.com/plugin/widget/index.htm?s=3&z=3&d=1&bd=0&ltf=808080&htf=808080&q=1&e=0&a=1&w=120&h=30&align=left"></iframe> -->
      </div>
      <div>Hi, 欢迎来好下单！</div>
      <div>
        <span v-if="$store.getters.token" v-text="$store.getters.mobile" @click="$router.push('/my/personInfo')">nie2017</span>
        <span class="name" @click="doLogin" v-if="!$store.getters.token">亲，请登录</span>
        <span class="space">|</span>
        <span class="back-out" @click='doBack()' v-if="$store.getters.token">退出</span>
        <span class="back-out" @click='doRegist()' v-if="!$store.getters.token">注册</span>
      </div>
      <div class="msg">
        <span @click="$router.push('/my/message')">消息</span>
        <span class="message-icon icon" @click="$router.push('/my/message')">  
          <!-- <em v-if="messageList && messageList.length > 0"></em> -->
        </span>
        <ul class="hide-li hide-ul" v-if="messageList && messageList.length > 0">
          <li class="clearfix" v-for="(messageInfo, index) in messageList" :key="index">
            <message :message="messageInfo" :theme="2"></message>
          </li>
        </ul>
      </div>
    </div>
    <div class="top-right fr">
      <span @click="goToMy(1)">我的订单</span>
      <span @click="goToMy(2)"> 购物车<em class="c-main">( {{cartCount}} )</em>
      </span>
      <span @click="goToMy(3)"> 收藏夹</span>
      <span><a @click="goToSellerCenter" target="_blank">卖家中心</a></span>
      <span><router-link to="/my/extra">商家入驻</router-link></span>
      <span><a  @click="onContactShop()">客服中心</a></span>
      <span class="phone">
        <dd>手机版</dd>
        <div class="qr-code">
          <img src="../assets/qrcode.png" alt="二维码">
          <h4>下载好下单APP</h4>
        </div>
      </span>
    </div>
  </div>
</div>
</template>

<script>
  // 消息组件
  import message from '../pages/my/components/Message'
  import { apiOrderAll, apiTrade } from 'js/api'
  import { mapGetters, mapActions, mapMutations } from 'vuex'
  import app from '../main'
  import { session, toShopUrl } from 'js/util'

  export default {
    data() {
      return {
      }
    },
    created() {
      if (this.token) {
        this.fetchCartCount(this.token)
        apiOrderAll(this.token, 1, '', '', 3).then(data => {
          this.updateMsgList(data.orderFormList)
        })
        apiTrade().then(data => {
          this.updateTradeList(data.TradeList || [])
          session.set('peopleList', data.TradeList)
        })
      }
    },
    updated() {
      this.fetchCartCount(this.token)
    },
    computed: {
      ...mapGetters(['token', 'messageList', 'cartCount', 'tradeList'])
    },
    methods: {
      ...mapActions(['fetchCartCount']),
      ...mapMutations(['updateMsgList', 'updateTradeList', 'selectJIMUser']),
      doBack() {
        JIM.loginOut()
        this.$store.commit('clearUserInfo')
        this.$store.commit('clearInfoByClickExit')
        this.$router.push('/')
      },
      doLogin() {
        if (this.$route.fullPath) {
          this.$router.push(`/login?redirect=${this.$route.fullPath}`)
          return
        }
        this.$router.push('/login')
      },
      doRegist() {
        this.$router.push('/register')
      },
      chooseSex(index, id) {
        this.currentIndex = index
        this.$store.commit('updateUserInfoIndustry', id)
        this.$router.push('/')
      },
      goToMy(num) {
        if (this.token) {
          if (num == 1) {
            window.open('/my/order')
          } else if (num == 2) {
            window.open('/cart')
          } else {
            window.open('/my/collectionShop')
          }
        } else {
          app.$toast('亲，请先登录', () => {
            this.$router.push('/login')
          })
        }
      },

      /**
       * 跳转到卖家中心
       */
      goToSellerCenter() {
        toShopUrl('/')
      },
      // 与平台客服聊天
      onContactShop(goodsId, goodsImg, goodsName) {
        if (!this.$store.getters.token) {
          this.$toast('亲，请先登录', () => {
            this.$router.push('/login')
          })
          return
        }
        const _this = this
        this.$store.dispatch('fetchUserRole', {
          token: this.$store.getters.token,
          callback(role) {
            _this.$store.dispatch('fetchCustomerByPhoneNumber', {
              mobile: _this.$store.getters.mobile
              // storeId: _this.store.storeId,
              // goodsId: goodsId,
              // firstMsg: JSON.stringify({
              //   'id': goodsId,
              //   'goods_main_photo': goodsImg,
              //   'goodsName': goodsName
              // })
            })
            // if (role != 2) {
            //   _this.$toast('您不是采购商，只有采购商才可以使用聊天功能')
            // } else {
            //   _this.$store.dispatch('fetchCustomerByPhoneNumber', {
            //     mobile: _this.$store.getters.mobile
            //     // storeId: _this.store.storeId,
            //     // goodsId: goodsId,
            //     // firstMsg: JSON.stringify({
            //     //   'id': goodsId,
            //     //   'goods_main_photo': goodsImg,
            //     //   'goodsName': goodsName
            //     // })
            //   })
            // }
          }
        })
      }
    },
    components: {
      message
    }
  }
</script>

<style lang="scss" scoped>
  @import '../scss/_var.scss';
  #top {
    .space {
      padding: 0px 8px;
    }
    .icon {
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100%;
    }
    background-color: #F6F6F6;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    .top-left {
      color: #666666;
      .msg {
        &:hover {
          .hide-li {
            display: block;
          }
        }
      }
      div {
        cursor: pointer;
        display: inline-block;
        margin-right: 25px;
        .message-icon {
          position: relative;
          top: 2px;
          display: inline-block;
          width: 16px;
          height: 14px;
          background-image: url('../assets/ico_index_news.png');
          em {
            position: absolute;
            background-color: #fe0107;
            border: 3px solid #fe0107;
            border-radius: 50%;
            left: 12px;
          }
        }
        .hide-li {
          display: none;
          position: absolute;
          background-color: $color-white;
          z-index: 9;
          width: 220px;
          line-height: 0;
          border: 1px solid transparent;
          .message {
            margin-right: 0px;
            width: 100%;
          }
          li {
            border-bottom: 1px dashed #ddd;
            &:last-child {
              border-bottom: 0px;
            }
            margin: 0;
            cursor: pointer;
          }
        }
        .back-out {
          color: $color-main;
        }
      }
    }
    .top-right {
      .iconfont {
        color: $color-main;
      }
      span {
        display: inline-block;
        margin-left: 20px;
        cursor: pointer;
        dd {
          display: inline-block;
          vertical-align: top;
        }
      }
    }
    .phone {
      position: relative;
      &:hover {
        .qr-code {
          display: block;
        }
      }
      .qr-code {
        background-color: #FFFFFF;
        box-shadow: 0px 0px 6px 0px;
        margin-left: 34px;
        width: 130px;
        height: 156px;
        position: absolute;
        right: -10px;
        display: none;
        padding: 20px;
        z-index: 30;
        
        img {
          width: 88px;
          height: 88px;
        }

        h4 {
          color: #fb309f;
          font-size: 12px;
          margin-top: 8px;
        }
      }
    }
  }
  #weather i { 
    background: no-repeat top left;
    display:inline-block;
    height:128px;
    line-height:128px;
    margin:0 auto 20px auto;
    font-size:70px;
    padding-left:150px;
    font-style:normal;
    text-align:center;
    font-weight:bold;
    &.icon-xiaoyu {
      background-image:url(../assets/weather/xiaoyu.png);
    }
    &.icon-zhongyu {
      background-image:url(../assets/weather/zhongyu.png);
    }
    &.icon-dayu {
      background-image:url(../assets/weather/dayu.png);
    }
    &.icon-qing {
      background-image:url(../assets/weather/qing.png);
    }
    &.icon-duoyun {
      background-image:url(../assets/weather/duoyun.png);
    }
    &.icon-yin {
      background-image:url(../assets/weather/yin.png);
    }
  }
  #weather {
    float: left;
    height: 30px;
    // margin-top: -4px;
    overflow: hidden;
    iframe {
      margin-top: 3px;
    }
  }
</style>